<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
	<div id="root">
		<button>get</button>
		<button>post</button>
	</div>
</body>
<script>
	// 1- 指定请求方式
	// 2- 指定请求地址
	// 3- 指定请求头
	// 4- 指定请求体
	// 5- 获取响应头
	// 6- 获取响应体
	const btns = document.querySelectorAll("button");
	btns[0].onclick = function(){
		const xhr = new XMLHttpRequest();
		xhr.timeout = 500;
		xhr.responseType = "json";
		xhr.open("get","http://zhangpeiyue.com:3000/scoreList?id=1");
		xhr.setRequestHeader("a",1);
		xhr.send();
		xhr.ontimeout = function(){
			console.log("请求时间超时！")
		}
		xhr.onload = function(){
			console.log(xhr.response);
			console.log(xhr.status);
			console.log(xhr.statusText);
			console.log(xhr.getAllResponseHeaders());
			console.log(xhr.getResponseHeader("content-type"));
		}
	}
	btns[1].onclick = function(){
		const xhr = new XMLHttpRequest();
		
		xhr.open("post","http://zhangpeiyue.com:3000/scoreList");
		xhr.setRequestHeader("Content-Type","application/json");
		xhr.send(JSON.stringify({
			userName:"刘德华",
			age:12
		}));
		xhr.onload = function(){
			console.log(xhr.response);
		}
	}
</script>
</html>